<template>
    <el-dialog v-model="baTable.table.extend!.showCloseDialog" align-center class="ba-operate-dialog">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ '关闭订单' }}
            </div>
        </template>
        <div class="warn-tip">
            <el-alert type="warning" :closable="false" show-icon title="如果订单已付款，关闭时将退回付款金额（原路退款）后取消该订单" />
        </div>
        <el-scrollbar height="50%">
            <el-form ref="formRef" :model="form" class="form">
                <el-form-item label="关闭原因" prop="remark">
                    <el-input v-model="form.remark" type="textarea" rows="6" placeholder="请填写关闭订单原因" />
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <view class="action">
                <el-button type="primary" @click="baTable.table.extend!.showCloseDialog = false">取消</el-button>
                <el-button type="danger" @click="onClose">确定</el-button>
            </view>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject, ref } from 'vue'
import type baTableClass from '/@/utils/baTable'
import { Action, ElMessage, ElMessageBox } from 'element-plus'
import { closeOrder } from '/@/api/backend/shop/order/order'
const baTable = inject('baTable') as baTableClass

interface cancelForm {
    remark: string
}
const form = ref(<cancelForm>{
    remark: '',
})

const onClose = () => {
    if (!form.value.remark) {
        return ElMessage.error('请填写关闭原因')
    }
    ElMessageBox.alert(`确定要关闭当前订单吗?`, '警告', {
        confirmButtonText: '确定',
        callback: (action: Action) => {
            if (action === 'confirm') {
                const rowData = baTable.table.extend!.orderData
                closeOrder({
                    id: rowData.id,
                    remark: form.value.remark,
                }).then(() => {
                    baTable.table.extend!.showCloseDialog = false
                    baTable.table.extend!.showDetailDialog = false
                    baTable.onTableHeaderAction('refresh', {})
                })
            }
            ElMessageBox.close()
        },
    })
}
</script>

<style lang="scss" scoped>
.form {
    padding: 10px;
}

.warn-tip {
    padding: 10px;
}

.action {
    display: flex;
    justify-content: center;
    padding: 10px;
}
</style>
